<template>
    <div class="iframe-cont">
        <div class="content">
            <el-page-header @back="$router.go(-1)" :content="$route.meta.title"></el-page-header>
            <el-divider></el-divider>
            <div v-loading="loading">
                <div class="group">
                    <el-button v-if="info.macStatus !== 0 && info.macStatus!= 4" class="stop-device" size="small"
                               type="danger" @click="stopDevice">停 用
                    </el-button>
                    <el-descriptions class="margin-top" title="生产属性" :column="3" size="mini" border>

                        <el-descriptions-item>
                            <template slot="label"> 主板型号</template>
                            {{ info.macTypeName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 出厂编号</template>
                            {{ info.macCode }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 设备类型</template>
                            {{ info.deviceClassName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 主板编号</template>
                            {{ info.deviceName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">版本密钥</template>
                            {{ info.deviceSecret }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 固件版本号</template>
                            {{ info.macVersion }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 安装人员</template>
                            {{ info.staffName }}
                        </el-descriptions-item>
                    </el-descriptions>
                    <div class="img-wrapper">
                        <span style="margin-right: 10px">安装照片：</span>
                        <div>
                            <el-image
                                v-for="item in info.devicePhoto"
                                style="width: 100px; height: 100px;margin-right: 10px;"
                                :preview-src-lis="info.devicePhoto"
                                :src="item"
                                fit="fill"></el-image>
                        </div>
                    </div>
                </div>
                <template v-if="interfaceVer==='v1'">
                    <div class="group">
                        <el-descriptions class="margin-top" title="基础属性" :column="3" size="mini" border>
                            <el-descriptions-item>
                                <template slot="label"> 加注流量计</template>
                                {{ info.fillTypeName }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 灯光</template>
                                {{ info.hasAdvert === 1 ? '有' : '无' }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 流量卡号</template>
                                {{ info.iotCardNo }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 主屏幕</template>
                                <span v-show="info.isBreakOne===1">断码屏1</span>
                                <span v-show="info.isBreakOne===1 && info.isBreakTwo===1">、</span>
                                <span v-show="info.isBreakTwo===1">断码屏2</span>
                                <span v-show="info.isColorScreen===1">彩屏</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 键盘</template>
                                {{ info.hasKeyboard === 1 ? '有' : '无' }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                              <template slot="label"> 读卡器</template>
                              {{ info.hasCard === 0 ? '无' : '有' }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 压力传感器</template>
                                {{ info.hasPressure === 1 ? '有' : '无' }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                    <div class="group" v-if="info.isExpand">
                        <el-descriptions class="margin-top" title="扩展属性" :column="3" size="mini" border>
                            <el-descriptions-item>
                                <template slot="label"> 温控装置</template>
                                {{ info.fillTypeName }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">液位传感器</template>
                                {{ info.hasSensor === 0 ? '无' : '有' }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"></template>
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                    <div class="group">
                        <el-descriptions class="margin-top" title="设备参数" :column="3" size="mini" border>
                            <el-descriptions-item>
                                <template slot="label"> 运行状态</template>
                                <span v-if="info.macStatus===2">正常</span>
                                <span v-else-if="info.macStatus===3">暂停</span>
                                <span v-else-if="info.macStatus===4">停用</span>
                                <span v-else-if="info.macStatus===0">未入库</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 单价（元）</template>
                                {{ info.ureaPrice }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 二维码</template>
                                <el-image
                                    style="width: 20px; height: 20px;"
                                    :src="info.qrCode"
                                    :preview-src-list="[info.qrCode]"
                                    fit="contain"
                                ></el-image>
                            </el-descriptions-item>
                            <el-descriptions-item v-if="info.fillType">
                                <template slot="label">流量计参数校准</template>
                                {{ info.macPrecision }}
                            </el-descriptions-item>
                            <el-descriptions-item v-if="info.hasAdvert">
                                <template slot="label"> 灯光时间</template>
                                {{ info.openTime }} - {{ info.closeTime }}
                            </el-descriptions-item>
                            <el-descriptions-item v-if="info.hasSensor">
                                <template slot="label"> 液位传感器参数校准（mv）</template>
                                {{ info.zeroVofLep }}
                            </el-descriptions-item>
                            <el-descriptions-item v-if="info.hasSensor">
                                <template slot="label"> 液位高度变化值（cm）</template>
                                {{ info.lepchange }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 桶最大高度（cm）</template>
                                {{ info.maxHeight }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 桶最大容量（kg）</template>
                                {{ info.totalWeight }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 计量单位</template>
                                {{ info.unit === 0 ? 'L' : 'kg' }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 尿素品牌</template>
                                {{ info.ureaType }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 泵压力值</template>
                                {{ info.pumpWorkKPa }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 设备待机页面</template>
                                {{ info.macScreen === 0 ? '普通式' : '加油站式' }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                </template>
                <template v-if="interfaceVer==='v2'">
                    <div class="group">
                        <el-descriptions class="margin-top" title="基础属性" :column="3" size="mini" border>
                            <el-descriptions-item>
                                <template slot="label"> 加注流量计</template>
                                {{ info.fillTypeName }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 电磁阀</template>
                                <span v-if="info.electronicValve===1">单阀</span>
                                <span v-else-if="info.electronicValve===2">双阀</span>
                                <span v-else>无</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                              <template slot="label"> 读卡器</template>
                              <span v-show="info.hasCard===1">插卡式</span>
                              <span v-show="info.hasCard===2">贴近式</span>
                              <span v-show="info.hasCard===0">无</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 灯光</template>
                                {{ info.hasAdvert === 1 ? '有' : '无' }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">联网方式</template>
                                {{ info.networkWay === 0 ? '4G' : '以太网' }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 流量卡号</template>
                                {{ info.iotCardNo }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                    <div class="group" v-if="info.isExpand">
                        <el-descriptions class="margin-top" title="扩展属性" :column="3" size="mini" border>
                            <el-descriptions-item>
                                <template slot="label">液位传感器</template>
                                {{ info.hasSensor === 0 ? '无' : '有' }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"></template>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"></template>
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                    <div class="group">
                        <el-descriptions class="margin-top" title="设备参数" :column="3" size="mini" border>
                            <el-descriptions-item>
                                <template slot="label"> 运行状态</template>
                                <span v-if="info.macStatus===2">正常</span>
                                <span v-else-if="info.macStatus===3">暂停</span>
                                <span v-else-if="info.macStatus===4">停用</span>
                                <span v-else-if="info.macStatus===0">未入库</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 单价（元）</template>
                                {{ info.ureaPrice }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 二维码</template>
                                <el-image
                                    style="width: 20px; height: 20px;"
                                    :src="info.qrCode"
                                    :preview-src-list="[info.qrCode]"
                                    fit="contain"
                                ></el-image>
                            </el-descriptions-item>
                            <el-descriptions-item v-if="info.fillType">
                                <template slot="label">流量计参数校准</template>
                                {{ info.macPrecision }}
                            </el-descriptions-item>
                            <el-descriptions-item v-if="info.hasAdvert">
                                <template slot="label"> 灯光时间</template>
                                {{ info.openTime }} - {{ info.closeTime }}
                            </el-descriptions-item>
                            <el-descriptions-item v-if="info.hasSensor">
                                <template slot="label"> 液位传感器参数校准（mv）</template>
                                {{ info.zeroVofLep }}
                            </el-descriptions-item>
                            <el-descriptions-item v-if="info.hasSensor">
                                <template slot="label"> 液位高度变化值（cm）</template>
                                {{ info.lepchange }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 桶最大高度（cm）</template>
                                {{ info.maxHeight }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 桶最大容量（kg）</template>
                                {{ info.totalWeight }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 计量单位</template>
                                {{ info.unit === 0 ? 'L' : 'kg' }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 尿素品牌</template>
                                {{ info.ureaType }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 设备待机页面</template>
                                {{ info.macScreen === 0 ? '普通式' : '加油站式' }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                </template>
                <template v-if="interfaceVer==='v3'">
                    <div class="group">
                        <el-descriptions class="margin-top" title="基础属性" :column="3" size="mini" border>
                            <el-descriptions-item>
                                <template slot="label"> 加注流量计</template>
                                {{ info.fillTypeName }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 电磁阀</template>
                                <span v-if="info.electronicValve===1">单阀</span>
                                <span v-else-if="info.electronicValve===2">双阀</span>
                                <span v-else>无</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                              <template slot="label"> 读卡器</template>
                              <span v-show="info.hasCard===1">插卡式</span>
                              <span v-show="info.hasCard===2">贴近式</span>
                              <span v-show="info.hasCard===0">无</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 灯光</template>
                                {{ info.hasAdvert === 1 ? '有' : '无' }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">联网方式</template>
                                {{ info.networkWay === 0 ? '4G' : '以太网' }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 流量卡号</template>
                                {{ info.iotCardNo }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                    <div class="group" v-if="info.isExpand">
                        <el-descriptions class="margin-top" title="扩展属性" :column="3" size="mini" border>
                            <el-descriptions-item>
                                <template slot="label"> 温控装置</template>
                                {{ info.fillTypeName }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 显示屏</template>
                                {{ info.displayScreen === 0 ? '无' : '有' }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 补液流量计</template>
                                {{ info.hasStorage === 0 ? '无' : '有' }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">液位传感器</template>
                                {{ info.hasSensor === 0 ? '无' : '有' }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 摄像头</template>
                                {{ info.camera === 0 ? '无' : '有' }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"></template>
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                    <div class="group">
                        <el-descriptions class="margin-top" title="设备参数" :column="3" size="mini" border>
                            <el-descriptions-item>
                                <template slot="label"> 运行状态</template>
                                <span v-if="info.macStatus===2">正常</span>
                                <span v-else-if="info.macStatus===3">暂停</span>
                                <span v-else-if="info.macStatus===4">停用</span>
                                <span v-else-if="info.macStatus===0">未入库</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 单价（元）</template>
                                {{ info.ureaPrice }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 二维码</template>
                                <el-image
                                    style="width: 20px; height: 20px;"
                                    :src="info.qrCode"
                                    :preview-src-list="[info.qrCode]"
                                    fit="contain"
                                ></el-image>
                            </el-descriptions-item>
                            <el-descriptions-item v-if="info.fillType">
                                <template slot="label">流量计参数校准</template>
                                {{ info.macPrecision }}
                            </el-descriptions-item>
                            <el-descriptions-item v-if="info.hasAdvert">
                                <template slot="label"> 灯光时间</template>
                                {{ info.openTime }} - {{ info.closeTime }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 启停温度（℃）</template>
                                {{ info.startTemperature }} - {{ info.endTemperature }}
                            </el-descriptions-item>
                            <el-descriptions-item v-if="info.hasStorage">
                                <template slot="label"> 补液流量计参数校准</template>
                                {{ info.storagePrecision }}
                            </el-descriptions-item>
                            <el-descriptions-item v-if="info.hasSensor">
                                <template slot="label"> 液位传感器参数校准（mv）</template>
                                {{ info.zeroVofLep }}
                            </el-descriptions-item>
                            <el-descriptions-item v-if="info.hasSensor">
                                <template slot="label"> 液位高度变化值（cm）</template>
                                {{ info.lepchange }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 桶最大高度（cm）</template>
                                {{ info.maxHeight }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 桶最大容量（kg）</template>
                                {{ info.totalWeight }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 浓度（%）</template>
                                {{ info.concentrate }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 计量单位</template>
                                {{ info.unit === 0 ? 'L' : 'kg' }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 尿素品牌</template>
                                {{ info.ureaType }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 隐藏量</template>
                                {{ info.hiddenValue }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label"> 设备待机页面</template>
                                {{ info.macScreen === 0 ? '普通式' : '加油站式' }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                </template>
                <div class="group" v-if="info.operatorId">
                    <el-descriptions class="margin-top" title="运营商信息" :column="3" size="mini" border>
                        <el-descriptions-item>
                            <template slot="label"> 所属运营商</template>
                            {{ info.operName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 加注站地址</template>
                            {{ info.siteAddress }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 销售时间</template>
                            {{ info.saleTime }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 开启时间</template>
                            {{ info.enableTime }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 续费时间</template>
                            {{ info.payTime }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 设备名称</template>
                            {{ info.macName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"></template>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>

                <div class="f f-j-c" style="margin-top: 20px">
                    <el-button style="width: 180px;" size="small" type="primary" @click="$router.back()">确 定</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import demoCode from '@/assets/image/demo-code.png'
import {abandonDevice, getDeviceDetail} from "@/api/device";
import {genQrcode} from "@/api/common";
import {interfaceVersion} from "@/utils";
import {Message} from "element-ui";

export default {
    data() {
        return {
            demoCode,
            info: {}, //设备信息
            loading: false,
            interfaceVer: null,
        }
    },
    watch: {
        'info.macType': {
            handler: function (val) {
                this.interfaceVer = interfaceVersion(val)
            },
            immediate: true
        }
    },
    created() {
        if (this.$route.query.id) {
            this.getDeviceDetail()
        }
    },
    methods: {
        stopDevice() {
            this.$confirm(`确认将当前设备停用并废弃，停用后的设备将不可操作，且永久无法使用。`, '设备停用', {
                confirmButtonText: '停 用',
                confirmButtonClass: 'red-btn',
                cancelButtonText: '暂不停用',
                type: 'warning',
                center: true,
                customClass: 'stop-message-box'
            }).then(() => {
                abandonDevice({id: this.$route.query.id}).then(() => {
                    Message.success('设备停用成功！')
                    this.$router.go(-1)
                })
            })
        },
        getDeviceDetail() {
            this.loading = true
            getDeviceDetail(this.$route.query.id).then(async (res) => {
                this.info = res.data
                this.info.devicePhoto = this.info.devicePhoto.split(',')
                const data = await genQrcode(this.$route.query.id)
                let url = URL.createObjectURL(new Blob([data]))
                this.info.qrCode = url
            }).finally(() => {
                this.loading = false
            })
        },
    }
}
</script>
<style scoped lang="scss">
.group {
    margin-top: 30px;
    padding-left: 40px;
}

.img-wrapper {
    margin-top: 20px;
    display: flex;
}

::v-deep .el-descriptions-item__cell {
    width: 16.66%;
}

.stop-device {
    position: absolute;
    right: 40px;
}
</style>
